<template>
  <div class="menu-icon">
    <div>
      <a-popover placement="rightTop"
                 trigger="click">
        <template slot="content">
          <!-- 图标列表 -->
          <MenuIconList v-model="menuIcon"
                        :size="8"
                        :hideUploadIcon="hideUploadIcon">
          </MenuIconList>
        </template>
        <!-- 图标显示 -->
        <MenuIconShow :imgSize="imgSize"
                      :icon-data="menuIcon">
        </MenuIconShow>
      </a-popover>
    </div>
  </div>
</template>

<script>
import MenuIconList from './MenuIconList.vue'
import MenuIconShow from './MenuIconShow.vue'
import PropTypes from '@zh/common-utils/prop-types'
const cloneDeep = require('clone')

export default {
  name: 'MenuIcon',
  extends: null,
  mixins: [],
  components: { MenuIconList, MenuIconShow },
  props: {
    // 数据值
    value: PropTypes.string.def(''),
    // 图片大小
    imgSize: PropTypes.number.def(50),
    // 是否允许上传图片
    hideUploadIcon: PropTypes.bool.def(false)
  },
  data () {
    return {
      // 选择的图标数据
      menuIcon: ''
    }
  },
  computed: {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.menuIcon = cloneDeep(value)
      }
    },
    menuIcon: {
      deep: true,
      immediate: true,
      handler (val) {
        this.$emit('handelMenuIcon', val)
      }
    }
  },
  created () { },
  mounted () { },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>